import React, { useEffect } from "react";
import { connect } from "react-redux";
import * as actionTypes from "./store/actionCreators";
import { forceCheck } from "react-lazyload"

import RecommendList from "../../components/list";
import Slider from "../../components/slider";
import { Content } from "./style";
import Scroll from "../../components/scroll";
import Loading from "../../baseUI/loading";

function Recommend(props) {
    const { bannerList, recommendList, enterLoading } = props
    const { getBannerDataDispatch, getRecommendDataDispatch } = props;
    useEffect(() => {
        if (!bannerList.size) {
            getBannerDataDispatch();
        }
        if (!recommendList.size) {
            getRecommendDataDispatch();
        }
    }, []);
    //mock 数据
    const bannerListJS = bannerList ? bannerList.toJS() : []
    const recommendListJS = recommendList ? recommendList.toJS() : [];
    return <Content>
        {enterLoading ? <Loading></Loading> : null}
        <Scroll className="list" onScroll={forceCheck} >
            <div>
                <Slider bannerList={bannerListJS} />
                <RecommendList recommendList={recommendListJS} />
            </div>
        </Scroll>
    </Content>
}

const mapStateToProps = (state) => ({
    bannerList: state.getIn(['recommend', 'bannerList']),
    recommendList: state.getIn(['recommend', 'recommendList']),
    enterLoading: state.getIn(['recommend', 'enterLoading'])
})

const mapDispatchToProps = (dispatch) => {
    return {
        getBannerDataDispatch() {
            dispatch(actionTypes.getBannerList());
        },
        getRecommendDataDispatch() {
            dispatch(actionTypes.getRecommendList());
        },
    }
};


export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Recommend))

